{extend name="layout" /}

{block name="content"}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>报价详情</title>
  <link href="/static/plugins/element-ui/element-ui.css" rel="stylesheet"/>
</head>
<style>
.search-box {
  display: flex;
  flex-wrap: wrap; 
}
.flex{
    display: flex;

}
.justify-content{
   justify-content:space-between;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.desc_name{
  font-weight: 400;
  width: 130px !important;
}
.desc_content{
  color: #73777a;
  width: 100%;
}
.text-cut{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
 
}
.margin_top_10{
  margin-top: 5px;
}

.text-999 {
  color: #999999;
}
.text-blue{
  color:#409EFF;
}
.font-12{
  font-size: 12px;
}
.el-textarea__inner{
  line-height: 1 !important;
  /*padding: 2px 5px !important;*/
}
.count{
  width: auto;
  line-height: 30px;
  margin-top: 5px;
  padding-right: 10px;
  font-size: 12px;
}

.readList  {
    display: inline-block;
    text-align: center;
    width: 40px;
    padding: 5px 0;

}
.readList p{
    margin: 0 auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100%;
    border: 1px solid #00aaff;
    background-color: #3296FA;
    color: #FFFFFF;
    overflow: hidden;
    font-size: 12px;

}

.replyList {
    background-color: #F2F3F7;
    margin-left: 52px;
    padding: 10px 5px;
    font-size: 12px;
    border-radius: 5px;
    padding-left:15px;
}

.time {
    display: inline-block;
    color: #999999;
    padding-left: 10px;
    font-size: 12px;
}
.content {
    /*padding: 3px 0;*/
}
.el-input__inner{
  height: 32px !important;
  line-height: 32px !important;
}
  .clssfiy-pic {
    width: 30px;
    height: 30px;
  }
  .el-form-item__error_new {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top:0px;
    position: absolute;
    /* top: 100%; */
    left: 10px;
}

/* el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
     padding-left: 0px !important; 
}

.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
     padding-left: 0px !important; 
}
.el-table .cell {
   padding-right: 0px !important; 

} */

/* .el-table td  {
  padding:0 !important;
  padding-bottom: 20px !important;
} */


.el-card__header{
  padding-bottom: 10px;
}

.el-input.is-disabled .el-input__inner {
    color: #333 !important;
}
.el-divider--horizontal{
  margin: 0 !important;
}
</style>
<body>
  <div style="
  opacity: 1;
  background: white;
  position: fixed;
  left: 250px;
  right: 0;
  top: 77px;
  bottom: 0;
  z-index: 9999;" id="model_load">
    <div style="text-align: center; line-height: 100px;color: #666;margin-top: 10%;font-size: 16px;">请稍等，数据请求中...</div>
</div>
  <div id="OFFER_MANGER">
    <!-- 表详情 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>表的基本信息</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" inline  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="功能模块" prop="module">
          <el-radio-group v-model="ruleForm.module">
            <el-radio v-for="(item,index) in module_list "  disabled :label="item.name">{{item.title}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form :model="ruleForm" :rules="rules" inline  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="数据表名" prop="name">
          <el-input v-model="ruleForm.name"  disabled></el-input>
        </el-form-item>
        <el-form-item label="控制器名" prop="cname">
          <el-input v-model="ruleForm.cname"  disabled></el-input>
        </el-form-item>
        <el-form-item label="表注释" prop="title">
          <el-input v-model="ruleForm.title" @blur="edit_table_title(ruleForm.title,'title')"></el-input>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 字段操作 -->
    <el-card class="box-card margin_top_10" >
      <!-- <div slot="header" class="clearfix">
        <span>字段操作</span>
        <el-button type="success" size="small"  style="float: right;"  @click="handleAdd">新增一行</el-button>
      </div> -->
      <div slot="header"  style="display: flex;justify-content: flex-start;" class="clearfix">
        <div style="width:100px;">字段操作</div>
        <div style="float: left;width:100%;">
          <el-tag  v-for="(item,index) in public_field"  @click="handleQuicklyAdd(item)"  size="small"  :key="index" style="margin-left: 8px;cursor :pointer;margin-bottom: 5px;"  effect="dark">{{ item.name }}</el-tag>
        </div>
        <el-button type="success" size="small"  style="float: right;height:30px;"  @click="handleAdd">新增一行</el-button>
      </div>
      <el-form ref="ruleForm" :model="ruleForm" inline >
        <el-table  :data="tableData"  border  highlight-current-row  >
            <el-table-column  prop="name"  header-align="center"  label="字段标识"  > 
              <template scope="scope">
                   <el-input v-model="scope.row.name" @blur="handleInput(scope.$index,scope.row,'name',true)"  @input="handleInput(scope.$index,scope.row,'name')"  placeholder="字段标识" ></el-input>
                   <p class="el-form-item__error_new"  v-if="scope.row.showname && !scope.row.name"> 请输入字段标识</p>
              </template>
            </el-table-column>
            <el-table-column  prop="title" header-align="center"  label="字段名称"  > 
              <template scope="scope">
                  <el-input v-model="scope.row.title" @blur="handleInput(scope.$index,scope.row,'title',true)"  @input="handleInput(scope.$index,scope.row,'title')"  placeholder="请输入内容"></el-input>
                  <p class="el-form-item__error_new"  v-if="scope.row.showtitle && !scope.row.title"> 请输入字段名称</p>
              </template>
            </el-table-column>
            <el-table-column  prop="type"  header-align="center"header-align="center"   label="字段类型"   >
              <template scope="scope">
                 <el-select v-model="scope.row.type" style="width:100%;"   @change="handleChange(scope.row)"  filterable   placeholder="请选择">
                  <el-option
                      v-for="item in filed_list"
                      style="width:100%;" 
                      :key="item.name"
                      :label="item.value"
                      :value="item.name">
                    </el-option>
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column  prop="define"  header-align="center"   label="字段定义"  >
              <template scope="scope">
                <el-input v-model="scope.row.define" disabled  placeholder="请输入内容"></el-input>
                <!-- <el-input v-model="define_list[scope.row.type]" placeholder="请输入内容"></el-input> -->
              </template>
            </el-table-column>
            <el-table-column  prop="value"   header-align="center"  label="字段默认值"   >
               <template scope="scope">
                <el-input v-model="scope.row.value"   @blur="hanldeChangeInput(scope.row.value,'value',scope.row.id)"  placeholder="请输入内容"></el-input>
              </template> 
            </el-table-column>
            <el-table-column label="操作" header-align="center"   width="200" >
               <template scope="scope">
                    <el-button size="small" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除 </el-button>
                    <el-button size="small" type="primary"  v-if="!scope.row.id"    @click="handleSave(scope.$index, scope.row)">保存 </el-button>
               </template>
            </el-table-column>
        </el-table>

      </el-form>




      <!-- <el-form ref="ruleForm" :model="ruleForm" inline style="margin-top: 20px;">
        <el-form-item label="默认字段:">
          <el-checkbox-group v-model="ruleForm.type_list">
            <el-checkbox  v-for="(item,index) in create_list" :label="item" name="type">{{item}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="主键名:" style="margin-left: 10px;" prop="b_name">
          <el-input v-model="default_id"></el-input>
        </el-form-item>
      </el-form> -->

      <el-divider ></el-divider>
      <el-form ref="ruleForm" :model="ruleForm"  style="margin-top: 30px;" >
        <el-form-item label="">
         <el-checkbox-group v-model="ruleForm.createList">
              <el-checkbox  v-for="(item,index) in create_list_bottom" :disabled="isContentShow(default_create_list,item.value)" :label="item.value" name="type">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small"  @click="submitForm('ruleForm')" >提交修改</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
        
      </el-form>
    </el-card>



  </div>
</body>
<script src="/static/plugins/vue/vue.min.js"></script>
<script src="/static/plugins/element-ui/element-ui.js"></script>
<script >
    // 字段定义列表
  var field_define_list = {
    number: "int(11) UNSIGNED NOT NULL",
    text: "varchar(256) NOT NULL",
    textarea: "varchar(256) NOT NULL",
    password: "varchar(128) NOT NULL",
    checkbox: "varchar(256) NOT NULL",
    radio: "tinyint(1) NOT NULL",
    datetime: "int(11) UNSIGNED NOT NULL",
    array: "varchar(256) NOT NULL",
    select: "varchar(256) NOT NULL",
    linkage: "varchar(256) NOT NULL",
    linkages: "varchar(256) NOT NULL",
    image: "int(11) UNSIGNED NOT NULL",
    images: "varchar(256) NOT NULL",
    file: "int(11) UNSIGNED NOT NULL",
    files: "varchar(256) NOT NULL",
    wangeditor: "text NOT NULL",
    ueditor: "text NOT NULL",
    money: "decimal(10,2) NOT NULL",
    alivideo: "int(11) UNSIGNED NOT NULL",
    color: "varchar(256) NOT NULL",
  };
  const OFFER_MANGER = new Vue({
  el:'#OFFER_MANGER',
  data() {
    return {
      create_list_bottom:[{name:'创建控制器',value:'controller'},{name:'创建模型',value:'model'},{name:'创建验证器',value:'validate'},{name:'创建接口',value:'api'}],
      module_list:Object.values({$module_model|raw}),
      filed_list:Object.values({$field_type|raw}),
      create_list:[],
      default_id:'',
      define_list:field_define_list,
      default_create_list:[],
      info:{$info|raw},
      tableData:Object.values({$model_fields|raw}),
 
      ruleForm: {
          module:'',//模块名
          name:'',//表名
          cname: '',//控制器名
          title: '', //标注释
          type_list:[],//默认字段
          createList:[],//创建模块
          z_name:'',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          module: [
            { required: true, message: '请选择功能模块', trigger: 'blur' },
          ],

          name: [
            { required: true, message: '请输入数据表名', trigger: 'blur' },
          ],
          cname: [
            { required: true, message: '请输入控制器名称', trigger: 'blur' },
          ],
          title: [
            { required: true, message: '请输入表注释', trigger: 'blur' },
          ],
 
        },
        public_field:Object.values({$public_field|raw}),

    }
  },
  mounted() {
        let that = this
        document.getElementById('model_load').style.display = 'none'
        this.ruleForm.module=this.info.module || this.module_list[0].name
        this.ruleForm.cname = this.info.cname
        this.ruleForm.name = this.info.name
        this.ruleForm.title = this.info.title
        this.default_id = this.info.default_id

        this.info.createList=[]
        if(this.info.is_api){
          this.info.createList.push('api')

        }
        if(this.info.is_controller){
          this.info.createList.push('controller')

        }
        if(this.info.is_validate){
          this.info.createList.push('validate')

        }
        if(this.info.is_model ){
          this.info.createList.push('model')
        }

        console.log(this.info,444)
        this.default_create_list= this.info.createList || []
        this.ruleForm.createList = this.info.createList || []

      
 
  },
  computed: {
    
  },
  methods: {
    handleQuicklyAdd(quicklyItem){
      const that = this
      let content=''
      that.tableData.filter(function(item,index){
          if( item.name==quicklyItem.name){
              content='该字段已和第'+(index+1)+'行的字段名'+item.name+'重复，请查看！'
              return
          }
      })
      if(content){
          this.$message({
              message: content,
              type: 'warning'
          });
          return
      }
      let data = {
        name:quicklyItem.name,
        title:quicklyItem.title,
        type:quicklyItem.type,
        define:quicklyItem.define,
        value:quicklyItem.value,
        id:this.info.id,
       }
      $.ajax({
            type: "POST",
            url: "{:url('tj_fields')}",
            dataType: "JSON",
            data: data,
            success: function (data) {
                if (data.code == 1) {
                   that.tableData.push({
                      name:quicklyItem.name,
                      title:quicklyItem.title,
                      type:quicklyItem.type || 'number',
                      define:quicklyItem.define ||  "int(11) UNSIGNED NOT NULL",
                      value:quicklyItem.value || 0,
                      id:data.data
                    })

                    that.$forceUpdate()
                    that.$message({
                        message: data.msg || '新增成功',
                        type: 'success'
                    });
       
                } else {
                   that.$message({
                        message: data.msg || '新增失败',
                        type: 'error'
                    });
                }
            },
            error: function (data) {
                that.$message({
                    message: data.msg || '新增失败',
                    type: 'error'
                });
            }
        });


    },
    //修改表注释
    edit_table_title(value,name){
      const that = this
      console.log(this.info,5555,value,5555)
      let data={
        id:this.info.id,
        name:name, //改变的是那个字段
        val:value, //改变后的值
      }

      $.ajax({
          type: "POST",
          url: "{:url('edit_table_title')}",
          dataType: "JSON",
          data: data,
          success: function (data) {
              if (data.code == 1) {
                  that.$message({
                      message: data.msg || '操作成功',
                      type: 'success'
                  });

              } else {
                  that.$message({
                      message: data.msg || '操作失败',
                      type: 'error'
                  });
              }
          },
          error: function (data) {
              that.$message({
                  message: data.msg || '操作失败',
                  type: 'error'
              });
          }
      });


    },
    hanldeChangeInput(value,title,m_id,define,value2){
      if(!m_id){
        return
      }
      const that = this
      let data={
        id:this.info.id,
        m_id:m_id, //如果有值改变的是字段列表，否则改变的是表基本信息
        name:title, //改变的是那个字段
        val:value, //改变后的值
      }
      if(title == 'type'){
        data[define] = value2
      }
      console.log('提交的值：',data)
      $.ajax({
          type: "POST",
          url: "{:url('edit_fields')}",
          dataType: "JSON",
          data: data,
          success: function (data) {
              if (data.code == 1) {
                  that.$message({
                      message: data.msg || '操作成功',
                      type: 'success'
                  });

              } else {
                  that.$message({
                      message: data.msg || '操作失败',
                      type: 'error'
                  });
              }
          },
          error: function (data) {
              that.$message({
                  message: data.msg || '操作失败',
                  type: 'error'
              });
          }
      });

     


    },
    isContentShow(arr, val) {
      if(!arr){
        return false
      }
       return  arr.includes(val)
    },
    handleChange(row){
        this.$set(row,'define',this.define_list[row.type])
        this.hanldeChangeInput(row.type,'type',row.id,'define',this.define_list[row.type])
    },
    handleInput(index,row,name,isSubmit){
      const that = this
      this.$nextTick(()=>{
        if(row[name]){
          that.$set(row,'show'+name,false)
        }else{
          that.$set(row,'show'+name,true)
        }
  		})
      that.$forceUpdate();

      // value,title,m_id
      if(isSubmit){
        this.hanldeChangeInput(row[name],name,row.id)

      }

    },

    //提交
    submitForm() {
      const that = this

      if(!this.ruleForm.title){
        that.$message({
            message:  '请输入表注释',
            type: 'warning'
        });
        return
      }

      let send_list=[]

      if(this.ruleForm.createList && this.ruleForm.createList.length>0){
        this.ruleForm.createList.forEach(item=>{
          if(!that.isContentShow(that.default_create_list,item)){
            send_list.push(item)
          }
        })

      }

      let data={
        id:this.info.id,
        createList:send_list
      }
       $.ajax({
            type: "POST",
            url: "{:url('modify_curd')}",
            dataType: "JSON",
            data: data,
            success: function (data) {
                if (data.code == 1) {
                    window.location.reload();
        
                    that.$message({
                        message: data.msg || '操作成功',
                        type: 'success'
                    });
              

                } else {
                   that.$message({
                        message: data.msg || '操作失败',
                        type: 'error'
                    });
                }
            },
            error: function (data) {
                that.$message({
                    message: data.msg || '操作失败',
                    type: 'error'
                });
            }
        });


    },
    curtail(arr) {
  　　var res = arr.slice(0);
      res.shift(arr[0]);
      return res;
    },


    handleAdd(){
      this.tableData.push({name:'',title:'',type:'number',define: "int(11) UNSIGNED NOT NULL",value:0})
    },
    //保存
    handleSave(index,row){
      const that = this

      if(!row.name){
        that.$message({
            message:  '请输入字段标识',
            type: 'warning'
        });
        return
      }

      if(!row.title){
        that.$message({
            message:  '请输入字段名称',
            type: 'warning'
        });
        return
      }

      let data = {
        name:row.name,
        title:row.title,
        type:row.type,
        define:row.define,
        value:row.value,
        id:this.info.id,
       }
      $.ajax({
            type: "POST",
            url: "{:url('tj_fields')}",
            dataType: "JSON",
            data: data,
            success: function (data) {
                if (data.code == 1) {
                  console.log(row,data,8787)
                    that.$set(row,'id',data.data)
                    that.$forceUpdate()
                    that.$message({
                        message: data.msg || '操作成功',
                        type: 'success'
                    });
       
                } else {
                   that.$message({
                        message: data.msg || '操作失败',
                        type: 'error'
                    });
                }
            },
            error: function (data) {
                that.$message({
                    message: data.msg || '操作失败',
                    type: 'error'
                });
            }
        });


    },
    
    // 删除
    handleDelete(index,row){
      const that = this
      if(this.tableData.length == 1){
        this.$message({
                message:  '至少保留一个字段！',
                type: 'warning'
         });
         return
      }

      if(!row.id){
        that.tableData.splice(index,1)
        return
      }


      let data={
        id:this.info.id,
        m_id:row.id, 
      }
      
      $.ajax({
            type: "POST",
            url: "{:url('delete_fields')}",
            dataType: "JSON",
            data: data,
            success: function (data) {
                if (data.code == 1) {
                   that.tableData.splice(index,1)
                    that.$message({
                        message: data.msg || '操作成功',
                        type: 'success'
                    });
       
                } else {
                   that.$message({
                        message: data.msg || '操作失败',
                        type: 'error'
                    });
                }
            },
            error: function (data) {
                that.$message({
                    message: data.msg || '操作失败',
                    type: 'error'
                });
            }
        });


					// if(this.tableData.length > 1){
					// 	this.tableData.splice(index,1)
					// }else{
          //   this.$message({
          //       message:  '至少保留一个字段！',
          //       type: 'warning'
          //   });
					// }
    }




  
  },
})
  


</script>
</html>
{/block}